<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>查询预采购单</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="query-preorder">
      <div class="queryForm">
        <search-btn-view btn-text="预采购单查询" @search="searchData(true)">
          <template slot="append">
            <el-button size="medium" type="primary" @click="printOrder">打印</el-button>
          </template>
          <template slot="right">
            <table-col-show-select v-if="tableHideColumnKey!==null" :table-name="tableName" :current-column-name="currentColumnName"
              :hide-column.sync="tableHideColumnKey">
            </table-col-show-select>
          </template>
          <div slot="search-content">
            <sys-common-search :search="search" request-url="materialSelectFilter/getMaterialSelectData" :request-data="{type:7}"
              label-width="calc(6em + 16px)" input-width="170px" :search-field="searchFields">
              <template slot="append">
                <el-form-item label="状态">
                  <el-select clearable class="form-input" v-model="search.status">
                    <el-option v-for="item in statusList" :key="`type_${item.value}`" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="制单日期">
                  <el-date-picker class="form-double" v-model="search.startDate" value-format="timestamp" :editable="false"
                    :picker-options="startPickerOptions"></el-date-picker>
                  -
                  <el-date-picker class="form-double" v-model="search.endDate" value-format="timestamp" :editable="false"
                    :picker-options="endPickerOptions"></el-date-picker>
                </el-form-item>
              </template>
            </sys-common-search>
          </div>
        </search-btn-view>
      </div>
      <div class="query-preorder-table" :class="{'hasPage':pagination.totalCount!==0}">
        <el-table fit stripe border :data="preOrders" ref="prePurchaseOrder" row-key="id" style="width:100%" height="parent" @row-click="toUpdate"
          :hide-column-keys="getTableHideColumns()">
          <checkbox-table-column width="40px" check-field="id" ref="printCol" @select-change="selectRow"></checkbox-table-column>
          <el-table-column :resizable="false" prop="handle" label="操作" width="110px">
            <template slot-scope="props">
              <div v-if="props.row.isApprovalUser===1&&props.row.status===0" style="text-align:center;">
                <el-button type="primary" size="mini" style="padding-left:7px;padding-right:7px;" @click="approvalStatus(props.row)">审核</el-button>
                <el-button type="danger" size="mini" style="padding-left:7px;padding-right:7px;margin-left:0;" @click="retreatOrder(props.row)">退回
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="status" label="状态" width="70px">
            <template slot-scope="props">
              <span>{{i18n.getMsg(`purchaseOrder.status.${props.row.status}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="companyOrderId" label="订单编号" :auto-width="true" min-width="105px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="articleNo" label="客户型号" :auto-width="true" min-width="105px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="factoryNo" label="工厂型号" :auto-width="true" min-width="105px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="providerName" label="供应商" :auto-width="true" min-width="85px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="purchasePeople" label="采购员" :auto-width="true" min-width="85px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="materialName" label="物料名称" :auto-width="true" min-width="95px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="materialType" label="物料类型" min-width="95px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="color" label="编号" :auto-width="true" min-width="85px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="colorDescription" label="描述" :auto-width="true" min-width="95px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="purchaseCount" label="采购数量" :auto-width="true" min-width="95px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="model" label="规格型号" :auto-width="true" min-width="95px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="material" label="材质" :auto-width="true" min-width="85px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="unit" label="单位" width="70px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="price" label="含税单价" :auto-width="true" min-width="95px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="totalMoney" label="金额" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column sortable :resizable="false" sort-by="tax" label="税率" width="70px">
            <template slot-scope="props">
              <span v-if="props.row.tax!==''">{{props.row.tax}}%</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="defaultWarehouse" label="仓库" width="80px"></el-table-column>

          <template v-for="option in laterPhaseOptions">
            <el-table-column :key="option.field" sortable :resizable="false" :prop="option.field" :label="option.label" width="105px">
              <template slot-scope="props">
                <template v-if="!props.row.isCanUpdate">
                  <span v-if="props.row[option.field]!==''">
                    {{moment(props.row[option.field]).format('YYYY-MM-DD')}}
                  </span>
                </template>
                <update-restoration-date-popover v-else :order="props.row" :order-type="3">
                  <span v-if="props.row[option.field]!==''">
                    {{moment(props.row[option.field]).format('YYYY-MM-DD')}}
                  </span>
                  <div v-else style="height:25px"></div>
                </update-restoration-date-popover>
              </template>
            </el-table-column>
          </template>

          <el-table-column sortable :resizable="false" prop="createUser" label="制单人" min-width="100px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="createTime" label="制单日期" width="100px">
            <template slot-scope="props">
              <span v-if="props.row.createTime!==''">{{moment(props.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="approvalUser" label="审核人" min-width="100px"></el-table-column>
          <el-table-column sortable :resizable="false" prop="approvalTime" label="审核时间" min-width="100px">
            <template slot-scope="props">
              <span v-if="props.row.approvalTime!==''">{{moment(props.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
    </div>

    <el-dialog title="修改预采购单" :visible.sync="openUpdateDialog" width="70%" @closed="updatePreOrder=null" top="10vh">
      <div style="height:calc(75vh - 54px);overflow:auto;">
        <pre-order-form v-if="openUpdateDialog" :order="updatePreOrder" @update-success="updatePreOrderSuccess"></pre-order-form>
      </div>
    </el-dialog>

    <el-dialog fullscreen class="dialog-fullscreen" title="打印预览" :visible.sync="openPrintDialog">
      <div style="height:100%;overflow:auto" v-if="openPrintDialog">
        <print-purchase-order :order-list="preOrders"></print-purchase-order>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="https://upload.shinehao.com.cn/20190416085621dom-to-image.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/showTextarea.css",
    "/vueSystem/components/css/vueEditor.css",
    "/vueSystem/mixins/printOrderConfigButton.css",
    "../queryPurchaseOrder/css/orderForm.css",
    "../mixins/orderPrint.css",
    "./css/preOrderForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/checkboxTableColumn.js",
    "/vueSystem/components/showTextarea.js",
    "/vueSystem/components/config/templateColumnConfig.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/models/templateConfig.js",
    "/vueSystem/js/commonTemplateUtil.js",
    "/vueSystem/mixins/printCommonOrderMixin.js"
  ]);
  importTableColShowConfigFiles();
</script>
<script src="../models/preOrderModel.js"></script>
<script src="../mixins/printPurchaseOrderTemplMixin.js"></script>
<script src="../queryPurchaseOrder/orderForm.js"></script>
<script src="../queryPurchaseOrder/updateRestorationDatePopover.js"></script>
<script src="./printPurchaseOrder.js"></script>
<script src="./preOrderForm.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin(),
      tableColShowMixin('prePurchaseOrder')
    ],
    data: function () {
      var self = this;
      var laterPhaseOptions = i18n.getDropDown('purchaseOrder.recoveryPhase', [
        'laterPhaseOne', 'laterPhaseTwo', 'laterPhaseThr', 'laterPhaseFour'
      ], {
        valueField: "field"
      });

      var search = {
        factoryNo: '',
        orderId: '',
        companyOrderId: '',
        customerNo: '',
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        status: '',
        startDate: null,
        endDate: null
      };
      return {
        loading: false,
        moment: moment,
        i18n: i18n,
        preOrders: [],
        selectIds: [],
        selectOrders: [],
        openPrintDialog: false,
        openUpdateDialog: false,
        updatePreOrder: null,
        user: null,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        laterPhaseOptions: laterPhaseOptions,
        statusList: i18n.getDropDown('purchaseOrder.status', [0, 1]),
        startPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'start');
          }
        },
        endPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'end');
          }
        },
        searchFields: ['companyOrderId', 'orderId', 'factoryNo', 'customerNo', 'materialName', 'model', 'color',
          'providerName'
        ]
      }
    },
    created: function () {
      this.loading = true;
      var self = this;
      SysUtil.getUser().then(function (user) {
        self.loading = false;
        self.user = user;
        self.setPreOrders(true);
      });
    },
    methods: {
      setPreOrders: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          factoryNo: search.factoryNo,
          orderId: search.orderId,
          companyOrderId: search.companyOrderId,
          customerNo: search.customerNo,
          materialName: search.materialName,
          model: search.model,
          color: search.color,
          providerName: search.providerName,
          status: search.status
        };

        var startDate = search.startDate;
        if (startDate !== null) {
          postData.startDate = moment(startDate).format('YYYY-MM-DD');
        }

        var endDate = search.endDate;
        if (endDate !== null) {
          postData.endDate = moment(endDate).format('YYYY-MM-DD');
        }

        var self = this;
        this.loading = true;
        var user = this.user;
        return ajaxRequest('advancePurchase/getAdvancePurchase', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
            self.selectIds = [];
          }

          var preOrders = res.returnData;
          preOrders = _.map(preOrders, function (preOrder) {
            preOrder = new PreOrderModel(preOrder, user);
            return preOrder;
          });
          self.preOrders = preOrders;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;

          self.$nextTick(function () {
            var selectIds = self.selectIds;
            self.$refs['printCol'].toggleRowSelection(selectIds, true);
          });
          return preOrders;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },
      searchData: function () {
        this.pagination.currentPage = 1;
        this.setPreOrders(true);
      },
      pageChange: function () {
        this.setPreOrders();
      },
      checkDateRange: function (time, type) {
        var search = this.search;
        if (type === 'start') {
          var endDate = search.endDate;
          if (endDate !== null) {
            return moment(time).isSameOrBefore(endDate, 'day');
          }
        } else if (type === 'end') {
          var startDate = search.startDate;
          if (startDate !== null) {
            return moment(time).isSameOrAfter(startDate, 'day');
          }
        }
        return true;
      },
      approvalStatus: function (order) {
        var id = order.id;
        this.loading = true;
        var self = this;
        ajaxRequest('advancePurchase/agreeAdvancePurchaseByMainId', {
          mainId: id
        }).then(function () {
          self.loading = false;
          self.$alert('预采购单审核成功', '信息', {
            callback: function (action) {
              self.setPreOrders();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      retreatOrder: function (order) {
        var id = order.id;
        this.loading = true;
        var self = this;
        ajaxRequest('advancePurchase/deleteAdvancePurchaseByMainId', {
          mainId: id
        }).then(function () {
          self.loading = false;
          self.$alert('预采购单退回成功', '信息', {
            callback: function (action) {
              self.setPreOrders();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      selectRow: function (selectOrderIds) {
        var selectIds = this.selectIds;
        var preOrders = this.preOrders;
        var orderIds = _.map(preOrders, 'id');
        orderIds = _.difference(orderIds, selectOrderIds);
        selectIds = _.difference(selectIds, orderIds);
        selectIds = _.union(selectIds, selectOrderIds);
        this.selectIds = selectIds;
      },
      printOrder: function () {
        var selectIds = this.selectIds;
        if (selectIds.length === 0) {
          this.$alert('请选择需要打印的订单', '信息');
          return;
        }

        this.loading = true;
        var self = this;
        var user = this.user;
        ajaxRequest('advancePurchase/getAdvancePurchaseByPrint', {
          ids: selectIds.join(',')
        }).then(function (preOrders) {
          preOrders = _.map(preOrders, function (preOrder) {
            preOrder = new PreOrderModel(preOrder, user);
            return preOrder;
          });
          self.loading = false;
          self.selectOrder = preOrders;
          self.openPrintDialog = true;
        }).catch(function () {
          self.loading = false;
        });
      },
      toUpdate: function (row, column) {
        var property = column.property;
        var fields = ['laterPhaseOne', 'laterPhaseTwo', 'laterPhaseThr', 'laterPhaseFour'];
        if (fields.indexOf(property) !== -1) {
          var isCanUpdate = row.isCanUpdate;
          if (isCanUpdate) {
            return;
          }
        }

        var isApprovalUser = row.isApprovalUser;
        if (isApprovalUser !== 1) {
          this.$alert('无审批权限,不能修改', '信息');
          return;
        }
        this.updatePreOrder = row;
        this.openUpdateDialog = true;
      },
      updatePreOrderSuccess: function () {
        this.openUpdateDialog = false;
        this.setPreOrders();
      }
    },
    components: {
      CheckboxTableColumn: CheckboxTableColumn,
      SysCommonSearch: SysCommonSearch,
      SearchBtnView: SearchBtnView,
      UpdateRestorationDatePopover: UpdateRestorationDatePopover,
      PreOrderForm: PreOrderForm,
      PrintPurchaseOrder: PrintPurchaseOrder
    }
  });
</script>

<style>
  .query-preorder {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
  }

  .query-preorder .query-preorder-table {
    height: calc(100% - 46px);
  }

  .query-preorder .query-preorder-table.hasPage {
    height: calc(100% - 83px);
  }

  .query-preorder .el-form-item {
    margin-bottom: 10px;
  }

  .query-preorder .form-double {
    width: 219px;
  }

  .query-preorder .form-input {
    width: 170px;
  }
</style>

</html>